<script lang="ts" setup>
import { computed, ref } from 'vue';
import { formatTime } from '@/utils/date';

const props = defineProps<{
  countdown: number;
}>();

const emit = defineEmits(['end']);

const time = ref(props.countdown);
const timer = setInterval(() => {
  if (time.value > 0) {
    time.value--;
  } else {
    emit('end');
    clearInterval(timer);
  }
}, 1000);

const formattedTime = computed(() => formatTime(time.value));
</script>

<template>
  <view class="apt-count-down">
    <text class="text-xl font-medium">{{ formattedTime }}</text>
  </view>
</template>

<style lang="scss">
.apt-count-down {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 16rpx;
  background-color: #fde2b2;
  border-radius: 2rpx;
  font-weight: 500;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #b84c16;
}
</style>
